<template>
  <div class="wrapper">
    <van-nav-bar
      title="常用地址"
      right-text="添加"
      left-arrow
      @click-left="pageMethod.onClickLeft"
      @click-right="pageMethod.onClickRight"
    />
    <div class="poi-list" v-if="pageData.cityData.length">
      <template v-for="(ktem, k) in pageData.cityData" :key="k + 'key'">
        <div class="list-item" @click="pageMethod.clickPoi(ktem)">
          <div class="item-icon"><van-icon name="location-o" /></div>
          <div class="item-cont">
            <p class="cont-name">{{ ktem.address }}</p>
            <p class="cont-detail" v-if="ktem.simple_address">
              <span class="cont-type" v-if="pageMethod.setPoiType(ktem.type)">{{
                setPoiType(ktem.type)
              }}</span>
              {{ ktem.simple_address }}
            </p>
          </div>
          <span class="del-btn" @click.stop="pageMethod.delItem(ktem)"
            ><van-icon name="delete-o"
          /></span>
        </div>
      </template>
    </div>
    <div v-else>
      <van-empty description="暂无常用地址" />
    </div>
    <!-- poi选择 -->
    <SearchPoi
      v-model:show="pageData.showPoi"
      :zIndex="3500"
      :showMode="false"
      title="新增地址"
      @change="pageMethod.changePoi"
    />
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive } from "vue";
import { pinyin } from "../../assets/js/pinyin";
import SearchPoi from "/@/components/SearchPoi/SearchPoi.vue";
import { Toast, Dialog } from "vant";

const emit = defineEmits(["commitPoiAddress"]);
const { proxy } = getCurrentInstance();
const pageData = reactive({
  showPoi: false,
  cityData: [],
  citys: {
    // 城市信息
    name: "北京市", // 城市名称
    code: "010", // 城市编号
    address: "", // 详细地址
    flat: "", // 地址纬度
    flng: "" // 地址精度
  }
});
onMounted(() => {
  pageMethod.getCityList();
});
const pageMethod = {
  delItem(item) {
    Dialog.confirm({
      message: "是否确认删除常用地址",
      zIndex: 4000
    })
      .then(async () => {
        const res = await proxy.$axiosJson(
          "/security/v1/carAddress/delCarAddress",
          { id: item.id }
        );
        Toast(res.ret_msg || "");
        if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
          pageMethod.getCityList();
        }
      })
      .catch(() => {
        // on cancel
      });
  },
  async getCityList() {
    const res = await proxy.$axiosJson(
      "/security/v1/carAddress/queryCarAddress",
      { member_id: localStorage.memberId }
    );
    pageMethod.resetData(res.data || []);
  },
  resetData(list) {
    const l = [];
    list.forEach(item => {
      const o = {
        ...item,
        address: item.address,
        code: item.city_area_num,
        flat: item.latitude,
        flng: item.longitude,
        name: item.city_name,
        simple_address: item.simple_address
      };
      l.push(o);
    });
    pageData.cityData = l;
  },
  setPoiType(type) {
    if (!type) return type;
    const types = type.split(";");
    if (types.length) {
      return types[types.length - 1];
    }
    return "";
  },
  onClickLeft() {
    proxy.$router.back();
  },
  onClickRight() {
    pageData.showPoi = true;
  },
  clickPoi(poi) {
    Object.assign(pageData.citys, poi);
    emit("commitPoiAddress", pageData.citys);
    pageMethod.onClickLeft();
  },
  async changePoi(city) {
    const data = {
      city_id: city.code || "",
      city_name: city.name || "",
      city_name_en: pinyin.getFullChars(city.name || ""),
      city_area_num: city.code || "",
      simple_address: city.simple_address || "",
      address: city.address || "",
      longitude: city.flng || "",
      latitude: city.flat || ""
    };
    const res = await proxy.$axiosJson(
      "/security/v1/carAddress/addCarAddress",
      data
    );
    Toast(res.ret_msg || "");
    if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
      pageMethod.getCityList();
    }
  }
};
</script>

<style scoped lang="less">
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #ffffff;
  z-index: 3000;
}
.poi-list {
  font-size: 14px;
  .list-item {
    padding: 10px 30px 10px 10px;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    .del-btn {
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 15px;
      font-size: 20px;
      color: #ed6a0c;
    }
    &:last-child {
      border-bottom: none;
    }
    & > div {
      display: inline-block;
    }
    .item-icon {
      width: 40px;
      text-align: center;
      vertical-align: top;
      font-size: 18px;
      color: #666666;
    }
    .item-cont {
      width: calc(100% - 45px);
      .cont-name {
        color: #333333;
      }
      .cont-detail {
        color: #999999;
        margin-top: 7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        .cont-type {
          padding-right: 5px;
        }
      }
    }
  }
}
</style>
